<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<style>
    .jp-time-width {width:200px; float:left;}
    .jp-select {width: auto;}
    .jp-line {float:left; line-height: 34px;}
    .jp-show {display: none;}
</style>
<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>

         <!-- 年  月  季 起止 -->

            <div class="form-group">

                <div class="col-sm-3">
                    <select id="selectTimeType" class="form-control jp-select">
                        <option value="">请选择时间类型</option>
                        <option value="1">年</option>
                        <option value="2">年月</option>
                        <option value="3">季</option>
                        <option value="4">起止时间</option>
                    </select>
                </div>

                <!-- 选择年份 -->
                <div class="col-sm-9 jp-show">
                    <input id="selectYear" name="" class="form-control jp-time-width"  type="text" value="" placeholder="选择年份" readonly> 
                </div>
                
                <!-- 选择年月 -->
                <div class="col-sm-9 jp-show">
                    <input id="selectYearMonth" name="" class="form-control jp-time-width" type="text" value="" placeholder="选择年月" readonly>
                </div>
                
                <!-- 请选择季度 -->
                <div class="col-sm-9 jp-show">
                    <input id="selectYearSeason" name="" class="form-control jp-time-width"  type="text" value="" placeholder="选择年份" readonly> 
                    <select class="form-control jp-select" >
                        <option value="">请选择季度</option>
                        <option value="">第一季度</option>
                        <option value="">第二季度</option>
                        <option value="">第三季度</option>
                        <option value="">第四季度</option>
                    </select>
                </div>
                
                <!-- 起止时间 -->
                <div class="col-sm-9 jp-show">
                    <input id="startTime" name="" class="form-control jp-time-width"  type="text" value="" placeholder="起始时间" readonly>
                    <div class="jp-line"><span class="glyphicon glyphicon-minus"></span></div>
                    <input id="endTime" name="" class="form-control jp-time-width"  type="text" value="" placeholder="结束时间" readonly> 
                </div>

            </div>






           
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#selectYear').datetimepicker({
            minView: "decade", //选择年份后，不会再跳转到月
            startView:4,
            format: "yyyy", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose:true //选择日期后自动关闭
        });
        $('#selectYearMonth').datetimepicker({
            minView: "year", //选择月份后，不会再跳转到日
            startView:3,
            format: "yyyy-mm", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose:true //选择日期后自动关闭
        });
        $('#startTime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose:true//选择日期后自动关闭
        });
        $('#selectYearSeason').datetimepicker({
            minView: "decade", //选择年份后，不会再跳转到月
            startView:4,
            format: "yyyy", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose:true //选择日期后自动关闭
        });
        $('#endTime').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose:true//选择日期后自动关闭
        });

        $('#selectTimeType').change(function(){
            var val = $(this).val()-1;
            $('.jp-show').hide();
            if(val>=0){$('.jp-show').eq(val).show();} 
        })
    })
   
</script>

</body>
</html>
